<template>

  <div class="currentBox">
    <!-- 头部 -->
    <div class="topPart">
      <div class="backBtn" @click="backToHome()">  <svg-icon class-name="back-icon" icon-class="back" /><span>返回</span></div>
      <div class="topMainTitle">实时会议行为查看</div>
      <div v-if="start" class="topRight">
        当前时间：<timePart />
      </div>
    </div>
    <!-- 课程信息 -->
    <div v-if="start" class="classBtnLine">
      <div class="classInfoBtn">任务名称：{{ taskName }}</div>
      <div class="classInfoBtn">应到人员：{{ totalUsers }}人</div>
    </div>
    <!-- 主要模块 -->
    <div v-if="start" class="mainPart">
      <div class="videoPart">
        <video id="jswebrtc-player" ref="player" width="100%" height="100%" controls />
      </div>

      <div class="actionData" style="flex-direction:column">
        <div class="actionMeetingTitle">
          <div>实时数据</div>
          <div>历史数据</div>
        </div>

        <div class="actionMeetingPart">
          <!-- 抽烟 -->
          <div class="actionOne">
            <div class="actionTitle">抽烟</div>
            <div class="actionBar">
              <el-progress :percentage="Percent(actionData.smoke)" :stroke-width="20" :color="colorList[0]" />
            </div>
            <div class="actionNum"><span>{{ actionData.smoke }}</span><span>{{ Percent(actionData.smoke) }}%</span></div>
          </div>
          <div id="smokeDiv" class="actionRecord">
            <el-table empty-text="暂无数据" :data="smokeData" :show-header="false" style="width: 100%">
              <el-table-column prop="time" label="时间" />
              <el-table-column label="人数" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.count }}人
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="actionMeetingPart">
          <!-- 趴桌 -->
          <div class="actionOne">
            <div class="actionTitle">趴桌/睡觉</div>
            <div class="actionBar">
              <el-progress :percentage="Percent(actionData.onTable)" :stroke-width="20" :color="colorList[1]" />
            </div>
            <div class="actionNum"><span>{{ actionData.onTable }}</span><span>{{ Percent(actionData.onTable) }}%</span></div>
          </div>
          <div id="onTableDiv" class="actionRecord">
            <el-table :data="onTableData" :show-header="false" style="width: 100%" empty-text="暂无数据">
              <el-table-column prop="time" label="时间" />
              <el-table-column label="人数" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.count }}人
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="actionMeetingPart">
          <!-- 玩手机 -->
          <div class="actionOne">
            <div class="actionTitle">玩手机</div>
            <div class="actionBar">
              <el-progress :percentage="Percent(actionData.phone)" :stroke-width="20" :color="colorList[2]" />
            </div>
            <div class="actionNum"><span>{{ actionData.phone }}</span><span>{{ Percent(actionData.phone) }}%</span></div>
          </div>
          <div id="phoneDiv" class="actionRecord">
            <el-table :data="phoneData" :show-header="false" style="width: 100%" empty-text="暂无数据">
              <el-table-column prop="time" label="时间" />
              <el-table-column label="人数" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.count }}人
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

      </div>
    </div>

    <div v-if="start" class="bottomDataLine">
      <div class="bottomLabel">出<br>勤<br>率</div>
      <!-- 人头数统计 -->
      <div class="actionOne2">

        <div class="actionNum2"><span>实到{{ actualNumber }}人/应到{{ totalUsers }}人</span><span class="percent">{{ Percent(actualNumber) }}%</span></div>
        <div class="actionBar2">
          <el-progress :percentage="Percent(actualNumber)" :stroke-width="20" :color="colorList[12]" />
        </div>
        <div class="actionTitle2">人头数统计</div>

      </div>
      <!-- 精细化考勤 -->
      <div class="actionOne2">
        <div class="actionNum2"><span>识别{{ attendanceNumber }}人/共{{ totalUsers }}人</span><span class="percent">{{ Percent(attendanceNumber) }}%</span></div>
        <div class="actionBar2">
          <el-progress :percentage="Percent(attendanceNumber)" :stroke-width="20" :color="colorList[13]" />
        </div>
        <div class="actionTitle2">精细化考勤</div>

      </div>
      <!-- 按钮 -->
      <el-button type="primary" style="margin-right:20px" @click="checkPerson()">人脸考勤详情</el-button>
      <!-- 人脸考勤详情弹窗 -->
      <el-dialog title="人脸考勤详情" :visible.sync="facesDialog" width="80%" class="faceBox" @close="closeFaces()">
        <div class="openFrame">
          <div class="openFrame-left">
            <div class="openFrame-box-title">识别名单</div>
            <div class="openFrame-box" style="height:368px;margin-bottom:20px">
              <div v-for="(item,index) in recognized" :key="index" class="onePerson">
                <div class="onePerson-img"><img :src="photoUrl(item.photo)"></div>
                <div class="onePerson-name">{{ item.username }}</div>
              </div>
            </div>
            <div class="openFrame-box-title">未识别名单</div>
            <div class="openFrame-box" style="height:244px">
              <div v-for="item in noRecognized" :key="item.phone" class="onePerson">
                <div class="onePerson-img"><img :src="photoUrl(item.photo)"></div>
                <div class="onePerson-name">{{ item.username }}</div>
              </div>
            </div>
          </div>
          <div class="openFrame-right">
            <div class="right-one">
              <div>总人数：<span>{{ totalUsers }}</span></div>
              <div>实到人数：<span>{{ actualNumber }}</span></div>
              <div>识别人数：<span>{{ attendanceNumber }}</span></div>
            </div>
            <div class="right-two">
              <circleChart :data="dataA" :title="title1" :set="chartSet" />
            </div>
            <div class="right-two">
              <circleChart :data="dataB" :title="title2" :set="chartSet" />
            </div>

          </div>

        </div>
      </el-dialog>
    </div>

    <div v-else class="emptyBox">
      <img src="../../assets/defaultNo.png">
      课程已结束
      <el-button type="primary" @click="backToHome()">确 定</el-button>
    </div>

  </div>

</template>

<script>
import { getTaskRunning } from '@/api/main'
import io from 'socket.io-client'
// 图表
import circleChart from './charts/circleChart.vue'
// 实时时间
import timePart from '../../components/time.vue'

export default {
  name: 'CurrentMeeting',
  components: { circleChart, timePart },
  data() {
    return {
      // total:45,
      imgsrc: require('../../assets/img001.png'),
      actionData: { // 0write书写 1read阅读 2listen听讲 3turn转头 4handUp举手 5stand站立 6discuss讨论 7guid指导 8sleep睡觉 9phone使用手机 10headDown低头 11onTable趴在桌子上
        // write:1,
        // read:2,
        // listen:3,
        // turn:4,
        // handUp:5,
        // stand:6,
        // discuss:7,
        // guid:8,
        // sleep:9,
        // phone:10,
        // headDown:11,
        // onTable:12
      },
      playerInstance: null,
      videoSrc: '',
      // htmlSrc:'./webrtc/webrtc.html'
      testNum: 4,
      colorList: ['#34d6ff', '#34ffb0', '#bc6eff', '#8cff59', '#ffee34', '#34fffd', '#ffc350', '#ff865c', '#c3ff34', '#7ea5ff', '#fd93f9', '#66dbff', '#66ffb3', '#89ff71'],
      facesDialog: false,
      // 当前任务
      start: true,
      // currentTask:{
      //   id:'',
      //   department_id:'',
      //   name:'',
      //   sampling_interval:null,
      //   videoStream1:null,
      //   videoStream2:null,
      //   start_time:null,
      //   duration:'2:00:0',
      // },
      taskName: null,
      totalUsers: null,
      // 参会人员信息
      usersItems: [],
      // 考勤信息
      attendanceInfo: [],
      attendanceNumber: null,
      actualNumber: null,
      recognized: [], // 已识别出的人员list
      noRecognized: [], // 未识别名单
      title1: '出勤统计',
      title2: '识别统计',
      dataA: [],
      dataB: [],
      chartSet: {
        titleColor: '#333'
      },
      smokeData: [],
      onTableData: [],
      phoneData: []

    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    },

    Percent() {
      return (e) => {
        if (e > 0) {
          const num = e / this.totalUsers * 100
          return Number(num.toFixed(2))
        } else {
          return 0
        }
      }
    }
  },
  watch: {
    videoSrc(newVal) {
      if (newVal && newVal !== '') {
        this.startPlaying(newVal)
      } else if (this.playerInstance) {
        this.stopPlaying()
      }
    },
    // 监听历史数据列表，有变化自动定位到最后一行
    smokeData() {
      var container = document.getElementById('smokeDiv')
      container.scrollTop = container.scrollHeight
    },
    onTableData() {
      var container = document.getElementById('onTableDiv')
      container.scrollTop = container.scrollHeight
    },
    phoneData() {
      var container = document.getElementById('phoneDiv')
      container.scrollTop = container.scrollHeight
    }

  },

  created() {
    // this.runingTask()
    // websocket实时信息
    const _this = this
    const address = this.$API_BASE_URL + '/bhserver'
    this.socket = io(address, {
      transports: ['websocket']
    })
    this.socket.on('monitor_bh_data', function(data) {
      _this.actionData = { // 0书写 1阅读 2听讲 3转头 4举手 5站立 6讨论 7指导 8睡觉 9使用手机 10低头 11趴在桌子上 12抽烟
        write: data.behavior_data['0'],
        read: data.behavior_data['1'],
        listen: data.behavior_data['2'],
        turn: data.behavior_data['3'],
        handUp: data.behavior_data['4'],
        stand: data.behavior_data['5'],
        discuss: data.behavior_data['6'],
        guid: data.behavior_data['7'],
        sleep: data.behavior_data['8'],
        phone: data.behavior_data['9'],
        headDown: data.behavior_data['10'],
        onTable: data.behavior_data['11'],
        smoke: data.behavior_data['12']
      }
      _this.attendanceInfo = data.attendance_data
      _this.actualNumber = data.attendance_data[0] // 实到
      _this.smokeData = data.data_smoking
      _this.onTableData = data.data_ly
      _this.phoneData = data.data_phone

      // 识别出的人员数
      if (data.attendance_data.length === 2 && data.attendance_data[1] === '') {
        _this.attendanceNumber = 0
      } else {
        _this.attendanceNumber = data.attendance_data.length - 1
      }
    })
    _this.startPlaying()
  },

  mounted() {

  },
  beforeDestroy() {
    if (this.playerInstance) {
      this.stopPlaying()
    }
    this.socket.close()
  },

  methods: {
    // 正在进行的任务
    runingTask() {
      getTaskRunning().then(response => {
        if (!response.data) {
          this.start = false
        } else {
          this.start = true
          // console.log('--------获取到的任务信息',response.data)
          // this.currentTask=response.data.task_data
          this.totalUsers = response.data.task_users.length
          this.taskName = response.data.task_data.name
          this.usersItems = response.data.task_users

          //   let param ={
          //     page:1,
          //     limit:1000,
          //     deptId:response.data.department_id
          //   }
          //  this.getDepInfo(param)
        }
      })
    },
    // 通过部门id获取信息
    // getDepInfo(param){
    //   listUser(param).then(response=>{
    //     this.usersInfo=response.data
    //     console.log('--------部门 this.usersInfo', this.usersInfo)
    //   })
    // },
    // 关闭人脸识别详情
    closeFaces() {
      this.facesDialog = false
      this.recognized = []
      this.noRecognized = []
    },

    // 播放器
    startPlaying() {
      this.runingTask()// 检测任务
      if (this.playerInstance) {
        this.stopPlaying()
      }
      const videoElement = document.getElementById('jswebrtc-player')
      const url = this.$WEBRTC_URL + '/live/student'
      this.videoSrc = url
      this.playerInstance = new JSWebrtc.Player(url, {
        video: videoElement,
        autoplay: true,
        onplay: (obj) => console.log('Stream started playing')
      })
    },

    stopPlaying() {
      this.playerInstance.destroy()
      this.playerInstance = null
    },

    // 返回上一级
    back() {
      this.$router.back()
    },
    // 返回主页
    backToHome() {
      this.$router.push({ path: '/startMeeting' })
    },
    // 精细化考勤弹窗
    checkPerson() {
      this.facesDialog = true
      // 筛选赋值
      // A已识别出的人的id---this.attendanceInfo
      // B所有参会人员---this.usersItems
      var arr1 = this.usersItems
      var arr2 = this.attendanceInfo

      for (var i = 0; i < arr1.length; i++) {
        var id1 = arr1[i].id
        // var isDifferent = false;
        for (var j = 0; j < arr2.length; j++) {
          var id2 = arr2[j]
          if (id1 === Number(id2)) {
            this.recognized.push(arr1[i]) // 这是相同的值
            break
          }
        }
      }
      // 从所有人员总减去已识别出来的人
      // 从arr1中减去arr2中包含的元素
      this.noRecognized = arr1.filter(item => !this.recognized.includes(item))

      // 传递图表数据
      const tatalNum = this.totalUsers// 总人数
      const actualNum = this.actualNumber// 实到人数
      const actualNumNone = tatalNum - actualNum// 未到人数
      const attentNum = this.attendanceNumber// 识别人数
      const attentNumNone = tatalNum - attentNum// 未识别人数

      // 出勤率
      this.dataA = [
        { value: actualNum, name: '出勤数' },
        { value: actualNumNone, name: '缺勤数' }
      ]
      // 识别率
      this.dataB = [
        { value: attentNum, name: '识别数' },
        { value: attentNumNone, name: '未识别' }
      ]
    },
    photoUrl(e) {
      return this.$API_BASE_URL + '/upload/' + e
    }
  }
}
</script>

<style scoped>
.mainPart{
  height: calc((100vh - 117px) * 7 / 10 );
}
.videoPart{
  height: calc((100vh - 117px) * 7 / 10 );
  width: calc((100vh - 117px) * 7 / 10 * 16 / 9) ;
}
.actionData{
  padding: 0;
  flex-direction: row;
}
.actionTitle{
  font-size: 18px;

  margin-bottom: 30px;
}
.actionBar{
  height: 20px;
}
.actionNum{
  font-size: 16px;
}
/* 定义滚动条的宽度和背景颜色 */
::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(255,255,255,0.03);
  }
/* 定义滑块的样式，包括圆角和内阴影 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow:none;
  background-color:  rgba(255,255,255,0.1);
}
</style>

